<template>
	<view class="page ">
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">申请补仓</block>
			<!-- 成功展示删除 -->
			<block slot="right"> <text class="" v-if="refundInfo.status==1" @tap='delOne'>删除</text></block>
		</fu-custom>
		<view class="padding-sm relative text-sm text-center"
			:class="refundInfo.status==2?'bg-red0 text-red':'bg-theme0 text-theme'">
			<view class="text-lg">当前状态：<text>{{refundInfo.status==2?'审核失败':refundInfo.status==0?'审核中':'审核成功'}}</text> </view>
			<view v-if="refundInfo.status==2" class="margin-top-xs">{{refundInfo.refusal_reason||''}}</view>
		</view>
		<view class="goods-wrap bg-white margin-lr radius-16 margin-top-sm " v-for="(item,index) in refundInfo.goods_list" :key='index'>
			<view class="flex padding-sm margin-bottom">
				<view class="img-200 overHidden relative">
					<fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
					<view class="box-kong padding-lr-16 padding-tb-4 text-white text-sm" v-if="item.port_name">
						{{item.port_name}}
					</view>
				</view>
				<view class="goods-info margin-left-sm">
					<view>
						<view class="text-df text-333 text-cut-2 text-weight-500">{{ item.goods_name || '' }}
						</view>
						<view class="text-sm text-999 text-weight-400 margin-t-8">
							商品货号：{{item.goods_sn}}
						</view>
					</view>
					<view class="flex justify-between ">
						<text class="text-df text-prices">¥{{ item.shop_price || '' }}</text>
						<text class="text-999 text-sm">销量{{item.goods_sales_sum}}</text>
						<text class="text-sm">库存{{item.goods_stock}}</text>
					</view>
				</view>			
			</view>
			<view class="flex align-center text-666 text-sm padding-bottom padding-lr justify-end"  v-if="refundInfo.goods_list&&refundInfo.goods_list.length>1">
				<view class=" ">补仓数量：</view>
				<view class="">{{item.num}}</view>
			</view>
		</view>
		<view class="after-item-wrap bg-white margin-top">
			<view class="after-item flex justify-between align-center" @click="toggleTab('selector')">
				<view class="after_left text-111 text-lg text-weight-400" v-if="refundInfo.goods_list&&refundInfo.goods_list.length==1">
					补仓数量
				</view>
				<view class="after_right   text-lg"> {{refundInfo.all_num||0}}</view>
			</view>
			<view class="after-item flex justify-between align-center">
				<view class="after_left text-111 text-lg flex-shrink margin-right-sm"> 所属仓库 </view>
				<view class="after_right   text-lg"> {{storeHouseInfo.name}} </view>
			</view>
			<view class="after-item flex justify-between align-center">
				<view class="after_left text-111 text-lg flex-shrink margin-right-sm"> 仓库地址 </view>
				<view class="after_right   text-lg text-right">{{storeHouseInfo.province}}-{{storeHouseInfo.city}}-{{storeHouseInfo.district}}-{{storeHouseInfo.address}} </view>
			</view>

		</view>
		<!-- 申请失败状态 -->
		<view class="ben-btn submit-btn margin-lr radius-100" @click.stop="handleSubmit" v-if="refundInfo.status==2">重新提交</view>
		<fu-notwork></fu-notwork>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				sku_id: '', // 商品规格
				imgWechatUrl: this.imgWechatUrl,
				min: 1,
				max: 6,
				number: '', //
				order_sn: null, // 订单编号
				num: 0, // 商品数量
				images: [],
				states: [{
					name: global.i18n['已收到货'],
					id: 1
				}, {
					name: global.i18n['未收到货'],
					id: 2
				}], // 货物状态
				staicon: [{
					name: '退款',
					id: 1
				}], // 退款原因
				statindex: 0,
				storeHouseInfo: '', //仓库信息
				refundInfo: '',
				select_reason: 0,
				images: [],
				refund_content: '', // 退款说明
				status: 0,
				visible: false,
				express_price: 0,
				isLoading: false, // 防连点
				order_id:'',//id
			};
		},
		onLoad(options) {
			this.order_id = options.id
			this.storeHouseInfo=uni.getStorageSync('storehouseInfo')
			this.getData();
		},
		methods: {
			// 修改数量
			setNumber(num) {
				this.number = num;
			},
			/**
			 * @event
			 * @description 所在地的选择弹窗显示
			 */
			toggleTab(ref) {
				this.$refs[ref].show();
			},
			//获取
			getData() {
				this.$api.post('/v1/63eb06ae0652c', {
					id: this.order_id
				}).then(res => {
					if (res.data.code == 1) {
						this.refundInfo = res.data.data;
					}
				});
			},
			delOne(){
				this.$util.showModal({
					title: this.i18n['提示'],
					content: '确定要删除当前内容吗?',
					confirmColor: this.$store.state.themeColor,
					success: (res) => {
						if (res.confirm) {
							this.$api.post('/v1/645a088ddfa84', {
									id: this.refundInfo&&this.refundInfo.id
								})
								.then(res => {
									if (res.data.code == 1) {
										this.$message.info('删除成功0')
										setTimeout(()=>{
											this.getData(); // 搜索方法
										},30)
									} else {
										this.$message.info(res.msg);
									}
								});
						}
					}
				})
			},
			// 提交
			handleSubmit() {
				if (this.isLoading) return;
				uni.hideKeyboard();
				
				
				let params=[];
				this.refundInfo&&this.refundInfo.goods_list.map(item=>{
					params.push({
						goods_id:item.goods_id,
						num:item.num
					})
				})
				let data = {
					params:JSON.stringify(params),// [{"goods_id":145,"num":2},{"goods_id":146,"num":2}]
					warehouse_id:this.storeHouseInfo.id,
					id:this.refundInfo.id
				};
				this.isLoading = true;
				this.$api.post('/v1/63e4c3f310a68', data).then(res => {
						if (res.data.code == 1) {
							this.$message.info("补仓申请已提交");
							// 通知列表页面更新数据
							uni.$emit('applyUpdata');
							setTimeout(() => {
								this.isLoading = false;
								uni.navigateBack();
							}, 800);
						} else {
							this.isLoading = false;
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						this.isLoading = false;
						console.log('err: ' + JSON.stringify(err));
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding-bottom: 160rpx;
		padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}


	.margin-t-8 {
		margin-top: 8rpx;
	}

	.padding-b-60 {
		padding-bottom: 60rpx;
	}

	.text-111 {
		color: #111111;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.line-20 {
		height: 20rpx;
		width: 100%;
		background: #F8F8F8;
	}

	.after-item-wrap {
		padding: 16rpx 24rpx 32rpx;

		.after-item {
			height: 78rpx;

			&.money {
				position: relative;
				height: 122rpx;
				padding-bottom: 44rpx;

				.tips {
					position: absolute;
					left: 0;
					bottom: 20rpx;
				}
			}

		}
	}


	.submit-btn {
		position: fixed;
		bottom: 80rpx;
		bottom: calc(80rpx + constant(safe-area-inset-bottom));
		bottom: calc(80rpx + env(safe-area-inset-bottom));
		left: 0rpx;
		width: 92%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: $bgtheme;
		font-size: 32rpx;
		font-weight: 500;
	}

	.wen {
		width: 702rpx;
		height: 272rpx;
		// border: 1rpx solid #e8e8e8;
		margin-top: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		background: #F8F8F8;
		;
		border-radius: 16rpx;
		position: relative;

		textarea {
			width: 100%;
			height: 85%;
		}

		.tips {
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
		}
	}

	.img-200 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;

		&>view {
			width: 100%;
		}
	}

	/deep/ .sex-wrap .w-picker-view {
		height: 228rpx;
	}

	/deep/ .w-picker-item {
		position: relative;

		// height: 108rpx!important;
		// line-height: 108rpx!important;
		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			top: 0;
			left: 0;
		}

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.box-kong {
		position: absolute;
		border-radius: 16rpx 0 16rpx 0;
		left: 0;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
	}

	.bg-red0 {
		background: rgba(#F02325, 0.1);
	}

	.bg-theme0 {
		background: rgba(#F97F33, 0.1);
	}
</style>
